<template>
  <div class="singer-wrap bg-wrap">
    <nav-bar :title="tabTitle"></nav-bar>
    <div class="singer-tabs">
      <van-tabs
        v-model="active"
        swipeable
        animated
        sticky
        :offset-top="offsetTop"
        title-inactive-color="#ffffff"
        title-active-color="#ff5b73"
        color="#ff5b73"
      >
        <van-tab v-for="item of classify" :key="item.id">
          <div class="tab-title" slot="title" @click="chooseTab(item.id)">{{ item.title }}</div>
          <div class="content">
            <div class="list clearfix">
              <div class="item" v-for="item of singerList" :key="item.img1v1Url">
                <div class="avatar">
                  <img :src="item.img1v1Url">
                </div>
                <div class="author">
                  <h2 class="name">
                    {{item.name}}
                    <span v-if="item.accountId" class="iconfont niceyizhuce"></span>
                  </h2>
                  <p class="alias" v-if="item.alias.length > 0">
                    <span v-for="(alias, index) of item.alias" :key="index">{{alias}}</span>
                  </p>
                </div>
                <span class="play">
                  <i class="iconfont nicebofang1"></i>
                </span>
              </div>
              <div class="no-data">
                <loading :isFixed="isFixed" :isShow="isShow" :finishedText="finishedText"></loading>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/Navbar'
import loading from '@/components/Loading'
import singerClassify from '@/models/singerClassify'
export default {
  data () {
    return {
      tabBorder: false,
      zIndex: 90,
      offsetTop: 44,
      tabTitle: '歌手分类',
      active: 1,
      cat: 1001,
      limit: 50,
      offset: 0,
      loadStatus: true,
      isFixed: false,
      isShow: false,
      finishedText: '',
      classify: singerClassify,
      singerList: []
    }
  },
  components: {
    NavBar,
    loading
  },
  methods: {
    // 选择分类
    // chooseTab (index, title) {
    //   this.singerList = []
    //   this.limit = 50
    //   this.offset = 0
    //   this.cat = 1001
    //   this.getSinger(this.cat, this.limit, this.offset)
    // },
    chooseTab (id) {
      this.singerList = []
      this.limit = 50
      this.offset = 0
      this.cat = id
      this.getSinger(this.cat, this.limit, this.offset)
    },
    // 获取歌手列表
    async getSinger (cat, limit, offset) {
      try {
        this.loadStatus = false
        let res = await this.$api.getSinger(cat, limit, offset)
        if (res.code === 200) {
          this.singerList = this.singerList.concat(res.artists)
          if (res.more) {
            this.finishedText = '加载中...'
            this.isShow = true
            this.loadStatus = true
            this.offset += 30
          } else {
            this.finishedText = '厉害啊, 拉完了~~'
            this.isShow = false
          }
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    this.getSinger(this.cat, this.limit, this.offset)
  }
}
</script>

<style lang="stylus" scoped>
.singer-wrap {

  .singer-tabs {
    .van-tab__pane {
      padding: 0.25rem 0.3rem;
    }

    .content {
      width: 100%;
      height: 100%;
      color: #fff;

      .list {
        margin: 0 -0.5%;

        .item {
          display: flex;
          margin-bottom: 0.35rem;
          align-items: center;
          .avatar {
            width: 1.05rem;
            height: 1.05rem;
            border-radius: 50%;
            margin-right: 0.2rem;
            img {
              width: 1.05rem;
              height: 1.05rem;
              border-radius: 50%;
            }
          }
          .author {
            width: 100%;
            flex: 1;
            h2 {
              font-size: 0.3rem;
              display: flex;
              align-items: center;
              span {
                font-size: 0.46rem;
                margin-left: 0.1rem;
                color: rgb(255, 91, 115);
                font-weight: bold;
                display: none;
              }
            }
            p {
              margin-top: 0.1rem;
              span {
                font-size: 0.26rem;
                color: rgba(255, 255, 255, 0.8);
              }
            }
          }
          .play {
            width: 0.45rem;
            height: 0.45rem;
            background: rgba(171, 171, 171, 0.5);
            border-radius: 50%;
            display: block;
            line-height: 0.45rem;
            text-align: center;
            i {
              font-size: 0.2rem;
              color: rgba(255, 255, 255, 0.7);
              margin: 0.01rem 0rem 0rem 0.03rem;
              transform: scale(0.7);
              display: block;
            }
          }
        }

        .no-data {
          width: 100%;
          font-size: 0.24rem;
          text-align: center;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
}
</style>
